<template>
  <div class="oilcard_index">
    <c-title :hide="false" text="IC卡"></c-title>
    <div class="cardDetail">
      <div class="txt">占位占位</div>
      <div class="cardPrice">
        <div class="priceTxt">余额</div>
        <div class="price"><span class="small">￥</span>{{ info.balance }}</div>
      </div>
    </div>
    <van-tabs v-model="active" line-width="20px" background="#F5F5F5">
      <van-tab title="充值记录" title-style="font-weight: bold;font-size: 0.94rem;color: #00001C;"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis" v-for="item in list" :key="item.id">
        <div class="top">
          <div class="top_l" v-if="item.has_one_store">门店：{{ item.has_one_store.store_name }}</div>
          <div class="top_r">¥{{ item.amount }}</div>
        </div>
        <div class="top">
          <div class="bottom_l">{{ item.recharge_time }}</div>
          <div class="bottom_r">卡余额：¥{{ item.balance }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      list: [],
      info: [],

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.post("plugin.oil-card.frontend.oil-card-manage.card-info", { card_num: this.$route.params.id }, "");
      if (result) {
        this.info = data.card;
        this.list = data.record.data;
        this.total_page = data.record.last_page;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post("plugin.oil-card.frontend.oil-card-manage.record", { card_num: this.$route.params.id, page: this.page }, "");
        this.isLoadMore = true;
        if (result) {
          this.list = this.list.concat(data.data);
        } else {
          this.isLoadMore = false;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.oilcard_index {
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  .list {
    display: flex;
    flex-direction: column;
    margin-top: 0.66rem;
    .lis {
      background: #ffffff;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      padding: 0.97rem 0.75rem;
      box-sizing: border-box;
      margin-bottom: 0.63rem;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        .top_l {
          font-weight: 500;
          font-size: 0.81rem;
        }
        .top_r {
          font-weight: 500;
          font-size: 0.88rem;
          color: #f15353;
        }
        .bottom_l {
          font-size: 0.81rem;
          color: #6e6e79;
        }
        .bottom_r {
          font-size: 0.81rem;
          color: #6e6e79;
        }
      }
      .top:last-child {
        margin-bottom: 0;
      }
    }
  }
  .cardDetail {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.94rem;
    .txt {
      font-size: 0.88rem;
      color: #00001c;
      text-align: left;
      margin-bottom: 1.16rem;
    }
    .cardPrice {
      display: flex;
      flex-direction: column;
      .price {
        display: flex;
        align-items: flex-end;
        font-weight: bold;
        font-size: 1.5rem;
        color: #00001c;
        line-height: 1.5rem;
        .small {
          font-size: 0.88rem;
          line-height: 1rem;
        }
      }
      .priceTxt {
        font-size: 0.88rem;
        color: #aaaab3;
        text-align: left;
      }
    }
  }
}
</style>
